<template>
  <!--  次数展示框-->
  <div id="timesBox">
    <el-cascader
      separator="的"
      v-model="value"
      :options="submenu"
      @change="handleChange"
      popover-class="custom-popover"
    >
    </el-cascader>
  </div>
</template>

<script>
import { events } from "./spread.config";

export default {
  name: "timesBox",
  props: {
    eventsName: {
      type: String
    }
  },
  data() {
    return {
      activeIndex: "1",
      submenu: [],
      numbers: "次数",
      event: "",

      value: "times"
    };
  },
  mounted() {
    this.getEventsData();
  },
  watch: {
    eventsName: {
      handler(newName, oldName) {
        console.log(newName);
        this.getEventsData();
      },
      immediate: true
    }
  },
  methods: {
    handleChange(value) {
      this.$emit("event", value);
    },
    getEventsData() {
      let _eventName = this.eventsName;
      if (_eventName === undefined) {
        _eventName = "$Anythings";
      }
      let params = {
        req: {
          events: [this.eventsName],
          type: "event",
          needEventTime: true
        },
        operationCtx: {}
      };
      events(params)
        .then(res => {
          console.log(res.data.value.list);
          var arr = res.data.value.list;
          arr.map(item => {
            item.value = item.name;
            item.label = item.cname;
            if (item.dataType === "number") {
              item.children = [
                { value: "AVG", label: "均值" },
                { value: "SUM", label: "总和" },
                { value: "MAX", label: "最大值" },
                { value: "MIN", label: "最小值" },
                { value: "uniqCount", label: "去重数" }
              ];
            } else {
              item.children = [{ value: "uniqCount", label: "去重数" }];
            }
          });
          this.submenu = arr;
          // this.submenu.unshift({ value: "period", label: "天数" });
          // this.submenu.unshift({ value: "hourperiod", label: "小时数" });
          this.submenu.unshift({ value: "times", label: "次数" });
        })
        .catch(error => {
          console.log("error=", error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
#timesBox {
  width: auto;
  height: 30px;
  line-height: 28px;
  border-radius: 4px;
  z-index: 100;
  position: relative;
  padding: 0 30px;
  margin: -3px -20px;
}

.el-cascader-dropdown {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.el-cascader-menu {
  border: 1px solid #e4e7ed;
  margin-right: 5px;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
</style>

<style scoped>
::v-deep.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 30px;
  line-height: 30px;
}

::v-deep.el-menu.el-menu--horizontal {
  border-bottom: none;
}

::v-deep#index .content-main .conduct .any[data-v-3ac8345e] {
  height: 30px;
}

::v-deep[data-v-65171014] .el-menu.el-menu--horizontal {
  border-radius: 8px;
}

::v-deep.el-submenu.is-active .el-submenu__title {
  border-bottom: none;
}
</style>
